---
sidebar_position: 7
---

# Months Navigation

## Default Month

By default, DayPicker renders the current month. You can change the default month by setting the `defaultMonth` prop to a specific date.

| Prop Name      | Type   | Description                                                              |
| -------------- | ------ | ------------------------------------------------------------------------ |
| `defaultMonth` | `Date` | The initial month to show in the calendar. Default is the current month. |

For example, to render a calendar starting from September 1979:

```tsx
<DayPicker defaultMonth={new Date(1979, 8)} />
```

<BrowserWindow>
  <Examples.DefaultMonth />
</BrowserWindow>

## Controlling the Month {#onmonthchange}

To programmatically control the month displayed when navigating, use the `month` and `onMonthChange` props.

| Prop Name       | Type                                                                        | Description                          |
| --------------- | --------------------------------------------------------------------------- | ------------------------------------ |
| `month`         | `Date`                                                                      | The month displayed in the calendar. |
| `onMonthChange` | [`MonthChangeEventHandler`](../api/type-aliases/MonthChangeEventHandler.md) | Callback when the month changes.     |

```tsx
import { useState } from "react";

import { DayPicker } from "react-day-picker";

export function Controlled() {
  const [month, setMonth] = useState(new Date(2024, 9)); // Start from October 2024
  return <DayPicker month={month} onMonthChange={setMonth} />;
}
```

### Today Button

To implement a **Go to Today** button, set `month` to the current date when the button is clicked.

```tsx
import { useState } from "react";

import { addMonths } from "date-fns";
import { DayPicker } from "react-day-picker";

export function Controlled() {
  const today = new Date();
  const nextMonth = addMonths(today, 1);

  const [month, setMonth] = useState(nextMonth);

  return (
    <>
      <DayPicker month={month} onMonthChange={setMonth} />
      <button onClick={() => setMonth(today)}>Go to Today</button>
    </>
  );
}
```

<BrowserWindow>
  <Examples.Controlled />
</BrowserWindow>

## Start and End Dates

Limit the dates the user can navigate to by using the `startMonth` and `endMonth` props.

| Prop Name    | Type   | Description                                 |
| ------------ | ------ | ------------------------------------------- |
| `startMonth` | `Date` | The earliest month to start the navigation. |
| `endMonth`   | `Date` | The latest month to end the navigation.     |

```tsx
<DayPicker startMonth={new Date(2024, 0)} endMonth={new Date(2025, 11)} />
```

<BrowserWindow>
  <Examples.StartEndMonths />
</BrowserWindow>

## Animating Month Transitions {#animate}

To animate the transition between months, set the `animate` prop to `true`:

| Prop Name | Type      | Description                                                     |
| --------- | --------- | --------------------------------------------------------------- |
| `animate` | `boolean` | Enable the transition animation when navigating between months. |

```tsx
<DayPicker animate />
```

<BrowserWindow>
  <Examples.Animate />
</BrowserWindow>

### Customizing the Animation

Use the supported CSS variables to customize the animation duration or timing function:

```css
.custom-animate {
  --rdp-animation_duration: 0.1s; /* Change the duration of the transition. */
  --rdp-animation_timing: ease-in; /* Choose a different timing function. */
}
```

```tsx
<DayPicker animate className="custom-animate" />
```

### Accessibility Note

To improve accessibility for users who prefer reduced motion, you can use the `prefers-reduced-motion` media query to disable animations.

```css
@media (prefers-reduced-motion: reduce) {
  .custom-animate {
    --rdp-animation_duration: 0s;
  }
}
```

### Changing the Animation Functions

For advanced customization, you can override the default style with your own animation functions:

```css
.rdp-caption_after_enter {
  animation:; /* Your value here */
}
```

<details>
  <summary>Class Names Used For Animations</summary>

| Class Name                  | Description                                          |
| --------------------------- | ---------------------------------------------------- |
| `.rdp-caption_after_enter`  | Caption animation for the month after, when enters.  |
| `.rdp-caption_after_exit`   | Caption animation for the month after, when exits.   |
| `.rdp-caption_before_enter` | Caption animation for the month before, when enters. |
| `.rdp-caption_before_exit`  | Caption animation for the month before, when exits.  |
| `.rdp-weeks_before_enter`   | Weeks animation for the month before, when enters.   |
| `.rdp-weeks_before_exit`    | Weeks animation for the month before, when exits.    |
| `.rdp-weeks_after_enter`    | Weeks animation for the month after, when enters.    |
| `.rdp-weeks_after_exit`     | Weeks animation for the month after, when exits.     |

</details>

:::warning Advanced Feature

Customizing the animation function, such as for an up/down transition, can be challenging due to the HTML table structure of the grid. We may improve this in a future version. Please leave your feedback in [DayPicker Discussions](https://github.com/gpbl/react-day-picker/discussions).

:::
